<template>
  <div class="cooperativeContent">
    <div
      class="content"
      v-if="!isShowDetailed"
    >
      <p class="title">合作企业</p>
      <p class="second-title">三汇人力资源集团自成立以来，服务企业100余家，输送员工超过100万人次，覆盖高校300+，我们了解求职者与企业的真正需求。</p>
      <div class="content-list">
        <div
          class="item"
          v-for="item in showData "
          :key="item.caseId"
          @click="getCaseId(item.caseId)"
        >
          <div class="img">
            <img
              :src="item.image"
            />
          </div>
          <p class="item-title">{{ item.company }}</p>
          <p class="item-text">{{ item.desc }}</p>
        </div>

      </div>
      <div class="page-parent-content">
        <div class="page-content">
          <el-pagination
            background
            ref="pagination"
            layout="pager"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            hide-on-single-page="true"
            @current-change="sizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div
      class="detailed-content"
      v-if="isShowDetailed"
    >
      <p class="title">{{detailedObj.company}}</p>
      <div class="detailed-content-list">
        <div class="detailed-content-list-left">
          <div class="detailed-content-list-left-img">
            <img
              :src="detailedObj.image"
            />
          </div>
        </div>
        <div class="detailed-content-list-right">
          <p class="detailed-title">{{detailedObj.desc}}</p>
          <p
            class="detailed-p"
            v-html="detailedObj.content"
          >
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: { CaseId: Object },
  data() {
    return {
      isShowDetailed: false,
      total: 0,
      showData: [],
      currentPage: 1,
      pageSize: 6,
      detailedObj: {}
    }
  },
  methods: {
    getData(page) {
      this.axios({
        method: "post",
        url: "/web/api/caseList",
        params: {
          page: page,
        },
        headers: {
          Authorization: "application",
        }
      }).then(res => {
        console.log(res);
        this.total = res.data.data.total;
        this.showData = res.data.data.data;
      });
    },
    sizeChange(num) {
      this.getData(num);
    },
    getCaseId(id) {
      this.axios({
        method: "post",
        url: "/web/api/caseDetail",
        params: {
          caseId: id
        },
        headers: {
          Authorization: "application",
        }
      }).then(res => {
        this.isShowDetailed = true;
        this.detailedObj = res.data.data.case;
      });
    },
    goBack() {

      if (this.isShowDetailed) {
        this.isShowDetailed = false;
      }
    }
  },
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false);
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false);
  },
  watch: {
    CaseId(n) {
      if (n.id !== undefined) {
        this.getCaseId(n.id);
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      } else {
        this.getData(1);
      }
    }
  }
}
</script>

<style scoped lang="scss">
.cooperativeContent {
  width: 100%;
  height: 1000px;
}
.content {
  width: 100%;
  height: 1200px;
  display: inline-block;
}
.detailed-content {
  width: 100%;
  height: 1000px;
  display: inline-block;
}

.title {
  font-size: 32px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
  line-height: 45px;
  margin-top: 30px;
  text-align: center;
}
.second-title {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 27px;
  text-align: center;
  margin-top: 20px;
}
.content-list {
  display: inline-block;
  width: calc(100% - 200px);
  margin-left: 100px;
  margin-top: 30px;
  cursor: pointer;
}
.item {
  width: 29%;
  height: 300px;
  margin-left: 2%;
  margin-right: 2%;

  margin-top: 20px;
  float: left;
}
.img {
  width: 100%;
  height: 200px;
  img{
    width:100%;
    height:100%;
  }
}
.item-title {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 25px;
  text-align: center;
  margin-top: 10px;
}
.item-text {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 22px;
  text-align: center;
  margin-top: 5px;
}
.detailed-content-list {
  display: inline-block;
  width: calc(100% - 400px);
  height: 750px;
  margin-left: 200px;
  cursor: pointer;
  margin-top: 100px;
}
.detailed-content-list-left {
  width: 48%;
  margin-right: 2%;
  height: 750px;
  float: left;
}
.detailed-content-list-left-img {
  width: 100%;
  height: 400px;
  img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
}
.detailed-content-list-right {
  width: 50%;
  height: 750px;
  float: left;
}
.detailed-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 25px;
}
.detailed-p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 27px;
  margin-top: 30px;
}
.page-parent-content {
  width: 100%;
  height: 36px;
  display: inline-block;
  text-align: center;
}
.page-content {
  width: 370px;
  height: 36px;
  margin: 20px auto;
}

@media screen and (max-width: 800px) {
  .cooperativeContent{
    height:auto;
    overflow: hidden;
    .content{
      height:auto;
      overflow: hidden;
      padding-bottom:30px;
      .title{
        margin-top:15px;
        font-size:1.2rem;
        line-height: 1.5;
      }
      .second-title{
        font-size:0.7rem;
        box-sizing: border-box;
        padding:0 15px;
        line-height: 1.5;
        margin-top:0;
      }
      .content-list{
        margin:0;
        width:100%;
        box-sizing: border-box;
        padding:0 2%;
        .item{
          margin-top:15px;
          width:46%;
          height:auto;
          overflow: hidden;
          .img{
            height:150px;
          }
          .item-title{
            font-size:0.8rem;
            line-height: 1.5;
            margin-top:5px;
          }
          .item-text{
            font-size:0.6rem;
            line-height: 1.5;
            margin-top:0px;
          }
        }
      }
    }
    .detailed-content{
      width:100%;
      height:auto;
      overflow: hidden;
      box-sizing: border-box;
      padding:0 15px;
      .title{
        font-size:1.2rem;
        line-height: 1.5;
        margin-top:15px;
        margin-bottom:15px;
      }
      .detailed-content-list{
        width:100%;
        padding:0;
        margin:0;
        height:auto;
        overflow: hidden;
        .detailed-content-list-left{
          width:100%;
          height:auto;
          margin:0;
          .detailed-content-list-left-img{
            width:100%;
            height:auto;
            img{
              width:100%;
              height:auto;
            }
          }
        }
        .detailed-content-list-right{
          width:100%;
          height:auto;
          overflow: hidden;
          .detailed-title{
            text-align: center;
            font-size:1.2rem;
            height:1.5;
          }
          .detailed-p{
            margin-top:15px;
            font-size:0.7rem;
          }
        }
      }
    }
  }
}
</style>
